<template>
  <!-- <div class="content-box">
  <common-header :title="title" ></common-header>-->
  <div class="page-content">
    <van-cell title="账户可用余额">
      <div slot="default" style="color: rgb(0, 0, 0);">
        ¥
        <span style="color: rgb(253, 57, 57);font-size:.65rem;font-weight:600">{{ amount_total }}</span>元
      </div>
    </van-cell>
    <van-field
      v-model="count"
      type="number"
      label="充值金额"
      placeholder="请输入充值金额"
      clearable
      required
      input-align="right"
      error-message-align="right"
      :error-message="countMessage"
    />
    <!-- <input type="text" placeholder="" v-model="count" /> -->

    <div class="payDetails" style="padding-left:16px;">
      <div class="title" style="width:2rem;">充值方式</div>
      <div class="text" style="line-height:1;">
        <van-radio-group v-model="payKind">
          <van-radio
            v-for="item in paymentList"
            :name="item.type+'&chan='+item.chan"
            checked-color="#07c160"
            :key="item.type+'&chan='+item.chan"
          >{{ item.chan }}</van-radio>
        </van-radio-group>
        <br />
      </div>
    </div>
    <div class="btnPay" @click="pay()">立即充值</div>
    <div class="care">充值提醒：二维码为公司授权三方收款，请放心支付；如果遇到风控无法支付，请降低金额分多笔进行充值【注意：订单金额必须和支付金额一致，否则系统无法识别】</div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter } from "common";
import { integer } from "@/utils/regRex";
import { paymentApi } from "@/api";
import { paysubmitApi } from "@/api/user";
import { createNamespacedHelpers } from "vuex";
let { mapGetters } = createNamespacedHelpers("user");
export default {
  name: "recharge",
  components: {
    commonFooter
  },
  computed: {
    ...mapGetters(["amount_total"])
  },
  mounted() {
    paymentApi().then(res => {
      this.paymentList = res.code == 200 ? res.data : [];
    });
  },
  methods: {
    pay() {
      if (!this.payKind) {
        this.$toast({
          message: "请选择支付方式",
          duration: 500
        });
        return;
      }
      if (!this.count) {
        this.countMessage = "请输充值金额";
        return;
      }
      if (!integer.test(this.count)) {
        this.countMessage = "充值金额只能为正整数";
      } else {
        let type = this.payKind.split("&chan=")[0] || "";
        let chan = this.payKind.split("&chan=")[1] || "";
        paysubmitApi({
          type: type,
          chan: chan,
          amount: this.count
        }).then(res => {
          this.$toast({
            message: res.msg,
            duration: 500,
            onClose: () => {
              if (res.code == 200) {
                this.$router.push({
                  name: "rechargeResult",
                  params: {
                    kind: this.payKind,
                    count: this.count,
                    img: res.data.qrcode,
                    info: res.data.info,
                    res: res.data
                  }
                });
              }
            }
          });
        });
      }
    }
  },
  data() {
    return {
      title: "充值",
      paymentList: [],
      count: "",
      countMessage: "",
      payKind: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
/deep/ .van-radio-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/deep/ .van-radio {
  position: relative;
  top: 0.2rem;
  margin-right: .6rem;
  margin-bottom: 0.2rem;
  span {
    color: #666 !important;
    font-size: 0.35rem;
  }
}
</style>
